<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>骨医快线</title>
    <link href="../../../css/mui.plus.css" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="../../../css/mui.picker.min.css"/>
    <link rel="stylesheet" type="text/css" href="../../../css/mui.poppicker.css"/>
    <style>
    	.mui-input-row label {
    		width: 65%;
    	}
    	.mui-input-row label ~ input {
    		width: 35%;
    	}
    	.label.label-info {
    		border-radius: 50px;
    		color: #fff;
    		background-color: #30B497;
    	}
    	.label.label-info.unchoose {
    		color: #666;
    		background-color: #eee;
    	} 
    	.form-tags>input {
    		margin-top: 10px;
    		border: none;
    	}
    </style>
</head>
<body>
	<header class="mui-bar mui-bar-nav oe-pri-bar">
	    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
	    <h1 class="mui-title">术前</h1>
	</header>
	<footer class="mui-bar mui-bar-footer" style="padding: 0;height: 50px;">
        <button type="button" id="btn-commit" class="mui-btn mui-btn-primary mui-btn-block" style="padding:10px 0;">保&nbsp;&nbsp;存</button>
    </footer>
	
    <div class="mui-content oe-helper">
    	<form class="mui-input-group" id="list-input">
    		<div class="mui-input-row">
                <label class="oe-label-pick">生命体征</label>
                <input type="hidden" value="" name="case_pre_op_vital_sign" id="hid1" />
                <button id="btn-life" type="button" class="mui-btn oe-btn-pick">请选择</button>
            </div>
            <ul class="mui-table-view">
            	<li id="asa" class="mui-table-view-cell" data-status="case_pre_op_asa">
		            <a class="mui-navigate-right">
						ASA分级
						<span class="mui-pull-right"></span>
		            </a>
		        </li>
            </ul>
            <div class="mui-input-row">
                <label>BNP(pg/ml)</label>
                <input type="text" name="case_pre_op_bng" placeholder="请填写" style="text-align: right;">
            </div>
            <ul class="mui-table-view">
            	<li class="mui-table-view-cell mui-collapse">
		        	<input type="hidden" name="case_pre_op_chest_film" id="hid2" value="" />
					<a class="mui-navigate-right" href="#">胸片</a>
					<div class="mui-collapse-content">
						<div id="tag-2" class="form-tags">
							<span class="label label-info unchoose">双肺纹理促卵</span>
							<span class="label label-info unchoose">双肺纹理增多</span>
							<span class="label label-info unchoose">间质改变 </span>
							<span class="label label-info unchoose">胸腔积液</span>
							<span class="label label-info unchoose">支气管炎</span>
							<span class="label label-info unchoose">肺气肿</span>
							<span class="label label-info unchoose">肺部感染</span>
						</div>
					</div>
				</li>
            </ul>
            <div class="mui-input-row">
                <label>PO2(mmHg)</label>
                <input type="text" name="case_pre_op_po2" placeholder="请填写" style="text-align: right;">
            </div>
            <div class="mui-input-row">
                <label>PCO2(mmHg)</label>
                <input type="text" name="case_pre_op_pco2" placeholder="请填写" style="text-align: right;">
            </div>
            <div class="mui-input-row">
                <label>PH</label>
                <input type="text" name="case_pre_op_ph" placeholder="请填写" style="text-align: right;">
            </div>
            <div class="mui-input-row">
                <label>输血量(ml)</label>
                <input type="text" name="case_pre_op_blood_transfusion" placeholder="请填写" style="text-align: right;">
            </div>
            <ul class="mui-table-view">
            	<li class="mui-table-view-cell mui-collapse">
		        	<input type="hidden" name="case_complication_thrombotic" id="hid3" value="" />
					<a class="mui-navigate-right" href="#">心电图</a>
					<div class="mui-collapse-content">
						<div id="tag-3" class="form-tags">
							<span class="label label-info unchoose">正常心电图 </span>
							<span class="label label-info unchoose">ST-T改变 </span>
							<span class="label label-info unchoose">T波异常改变 </span>
							<span class="label label-info unchoose">房性早搏</span>
							<span class="label label-info unchoose">室性早搏</span>
							<span class="label label-info unchoose">一度房室传导阻滞</span>
							<span class="label label-info unchoose">二度房室传导阻滞</span>
							<span class="label label-info unchoose">完全右束支传导阻滞</span>
							<span class="label label-info unchoose">房颤</span>				
						</div>
					</div>
				</li>
            </ul>
            <div class="mui-input-row">
                <label>骨密度-WARD</label>
                <span style="line-height: 44px;">-</span><input type="text" name="case_pre_op_bone_density_ward" placeholder="请填写" style="text-align: right;width: 30%;">
            </div>
            <div class="mui-input-row">
                <label>骨密度-股骨颈</label>
                <span style="line-height: 44px;">-</span><input type="text" name="case_pre_op_bone_density_femoral_neck" placeholder="请填写" style="text-align: right;width: 30%;">
            </div>
            <div class="mui-input-row">
                <label>白细胞(*10<sup>9</sup>)</label>
                <input type="text" name="case_pre_op_white_blood_cell" placeholder="请填写" style="text-align: right;">
            </div>
            <div class="mui-input-row">
                <label>血红蛋白(g/L)</label>
                <input type="text" name="case_pre_op_hemoglobin" placeholder="请填写" style="text-align: right;">
            </div>
            <div class="mui-input-row">
                <label>红细胞比积</label>
                <input type="text" name="case_pre_op_hematocrit" placeholder="请填写" style="text-align: right;">
            </div>
            <div class="mui-input-row">
                <label>白蛋白(g/L)</label>
                <input type="text" name="case_pre_op_albumin" placeholder="请填写" style="text-align: right;">
            </div>
       </form>
    </div>
    
    <script id="tmp-list-input" type="text/html">
    	{{if data}} 
    		<div class="mui-input-row">
                <label class="oe-label-pick">生命体征</label>
                <input type="hidden" value="" name="case_pre_op_vital_sign" id="hid1" />
                <button id="btn-life" type="button" class="mui-btn oe-btn-pick">{{data.case_pre_op_vital_sign || '请选择'}}</button>
            </div>
            <ul class="mui-table-view">
            	<li id="asa" class="mui-table-view-cell" data-status="case_pre_op_asa">
		            <a class="{{data.case_pre_op_asa ? '' : 'mui-navigate-right'}}">
						ASA分级
						<span class="mui-pull-right">{{data.case_pre_op_asa}}</span>
		            </a>
		        </li>
            </ul>
            <div class="mui-input-row">
                <label>BNP(pg/ml)</label>
                <input type="text" name="case_pre_op_bng" placeholder="请填写" style="text-align: right;" value="{{data.case_pre_op_bng}}">
            </div>
            <ul class="mui-table-view">
            	<li class="mui-table-view-cell mui-collapse">
		        	<input type="hidden" name="case_pre_op_chest_film" id="hid2" value="{{data.case_pre_op_chest_film}}" />
					<a class="mui-navigate-right" href="#">胸片</a>
					<div class="mui-collapse-content">
						<div id="tag-2" class="form-tags">
							<span class="label label-info {{data.case_pre_op_chest_film | match : '双肺纹理粗乱'}}">双肺纹理粗乱</span>
							<span class="label label-info {{data.case_pre_op_chest_film | match : '双肺纹理增多'}}">双肺纹理增多</span>
							<span class="label label-info {{data.case_pre_op_chest_film | match : '间质改变'}}">间质改变 </span>
							<span class="label label-info {{data.case_pre_op_chest_film | match : '胸腔积液'}}">胸腔积液</span>
							<span class="label label-info {{data.case_pre_op_chest_film | match : '支气管炎'}}">支气管炎</span>
							<span class="label label-info {{data.case_pre_op_chest_film | match : '肺气肿'}}">肺气肿</span>
							<span class="label label-info {{data.case_pre_op_chest_film | match : '肺部感染'}}">肺部感染</span>
							<input type="text" placeholder="自定义字段（多个字段请用逗号分隔）" name="case_pre_op_chest_film_remark" value="{{data.case_pre_op_chest_film_remark}}"/>
						</div>
					</div>
				</li>
            </ul>
            <div class="mui-input-row">
                <label>PO2(mmHg)</label>
                <input type="text" name="case_pre_op_po2" placeholder="请填写" style="text-align: right;" value="{{data.case_pre_op_po2}}">
            </div>
            <div class="mui-input-row">
                <label>PCO2(mmHg)</label>
                <input type="text" name="case_pre_op_pco2" placeholder="请填写" style="text-align: right;" value="{{data.case_pre_op_pco2}}">
            </div>
            <div class="mui-input-row">
                <label>PH</label>
                <input type="text" name="case_pre_op_ph" placeholder="请填写" style="text-align: right;" value="{{data.case_pre_op_ph}}">
            </div>
             <div class="mui-input-row">
                <label>输血量(ml)</label>
                <input type="text" name="case_pre_op_blood_transfusion" placeholder="请填写" style="text-align: right;"  value="{{data.case_pre_op_blood_transfusion}}">
            </div>
            <ul class="mui-table-view">
            	<li class="mui-table-view-cell mui-collapse">
		        	<input type="hidden" name="case_pre_op_ecg" id="hid3" value="{{data.case_pre_op_ecg}}" />
					<a class="mui-navigate-right" href="#">心电图</a>
					<div class="mui-collapse-content">
						<div id="tag-3" class="form-tags">
							<span class="label label-info {{data.case_pre_op_ecg | match : '正常心电图'}}">正常心电图 </span>
							<span class="label label-info {{data.case_pre_op_ecg | match : 'ST-T改变'}}">ST-T改变 </span>
							<span class="label label-info {{data.case_pre_op_ecg | match : 'T波异常改变'}}">T波异常改变 </span>
							<span class="label label-info {{data.case_pre_op_ecg | match : '房性早搏'}}">房性早搏</span>
							<span class="label label-info {{data.case_pre_op_ecg | match : '室性早搏'}}">室性早搏</span>
							<span class="label label-info {{data.case_pre_op_ecg | match : '一度房室传导阻滞'}}">一度房室传导阻滞</span>
							<span class="label label-info {{data.case_pre_op_ecg | match : '二度房室传导阻滞'}}">二度房室传导阻滞</span>
							<span class="label label-info {{data.case_pre_op_ecg | match : '完全右束支传导阻滞'}}">完全右束支传导阻滞</span>
							<span class="label label-info {{data.case_pre_op_ecg | match : '房颤'}}">房颤</span>	
							<input type="text" placeholder="自定义字段（多个字段请用逗号分隔）" name="case_pre_op_ecg_remark" value="{{data.case_pre_op_ecg_remark}}"/>
						</div>
					</div>
				</li>
            </ul>
            <div class="mui-input-row">
                <label>骨密度-WARD</label>
                <span style="line-height: 44px;">-</span><input type="text" name="case_pre_op_bone_density_ward" placeholder="请填写" style="text-align: right;width: 30%;"  value="{{-data.case_pre_op_bone_density_ward || ''}}">
            </div>
            <div class="mui-input-row">
                <label>骨密度-股骨颈</label>
                <span style="line-height: 44px;">-</span><input type="text" name="case_pre_op_bone_density_femoral_neck" placeholder="请填写" style="text-align: right;width: 30%;"   value="{{-data.case_pre_op_bone_density_femoral_neck || ''}}">
            </div>
            <div class="mui-input-row">
                <label>白细胞(*10<sup>9</sup>)</label>
                <input type="text" name="case_pre_op_white_blood_cell" placeholder="请填写" style="text-align: right;"   value="{{data.case_pre_op_white_blood_cell}}">
            </div>
            <div class="mui-input-row">
                <label>血红蛋白(g/L)</label>
                <input type="text" name="case_pre_op_hemoglobin" placeholder="请填写" style="text-align: right;"   value="{{data.case_pre_op_hemoglobin}}">
            </div>
            <div class="mui-input-row">
                <label>红细胞比积</label>
                <input type="text" name="case_pre_op_hematocrit" placeholder="请填写" style="text-align: right;"   value="{{data.case_pre_op_hematocrit}}">
            </div>
            <div class="mui-input-row">
                <label>白蛋白(g/L)</label>
                <input type="text" name="case_pre_op_albumin" placeholder="请填写" style="text-align: right;"   value="{{data.case_pre_op_albumin}}">
            </div>
    	{{/if}}
    </script>

    <script src="../../../js/mui.min.js"></script>
    <script src="../../../js/app.js"></script>
    <script src="../../../js/lib/template.js"></script>
    <script src="../../../js/mui.picker.min.js"></script>
    <script src="../../../js/mui.poppicker.js"></script>
    <script src="../../../js/jquery-1.9.1.min.js"></script>
    <script src="../../../js/jquery.tags.min.js"></script>
    <script>
    	(function($, a){
    		template.helper('match', function(data, compareData){
				var reg = new RegExp(compareData);
				return data?(reg.test(data)?'':'unchoose'):'unchoose';
			});
    		
    		var wv,
    			caseId,
    			html,
    			type,
    			tmpData,
    			commitData = {};
    			
//  		var hid1 = document.getElementById("hid1"),
//  			hid2 = document.getElementById("hid2"),
//  			hid3 = document.getElementById("hid3");
    			
    		window.addEventListener('refresh', function(){
				getCaseInfoById(caseId, type);
			})
    		
    		$('body').on('tap', '#btn-commit', function(){
    			commitData = app.form.getJsonFromForm('list-input');
    			commitData.case_pre_op_bone_density_ward = -commitData.case_pre_op_bone_density_ward;
    			commitData.case_pre_op_bone_density_femoral_neck = -commitData.case_pre_op_bone_density_femoral_neck;
    			commitData.case_id = caseId;
    			
    			CommitDataById(commitData);
    		});
    		
    		$('.mui-content').on('tap', '#btn-life', function (){
    			var self = this;
    			 picker1.show(function (items) {
                    //返回 false 可以阻止选择框的关闭
                    //return false;
                    if (items && items.length > 0) {
                        self.textContent = hid1.value = items[0].text;
                        if(self.textContent !== '请选择'){
                        	self.style.color = '#000';
                        }
                    }
                });
    		});
    		
    		//ASA量表
    		$('.mui-content').on('tap', '#asa', function(){
    			var self = this;
    			$.openWindow({
    				url: '../../scale/detail.html',
    				waiting: {
    					autoShow: false
    				},
    				extras: {
    					rs_id: '63',
    					case_id: caseId,
    					case_status: self.dataset.status
    				}
    			});
    		});
    		
    		setTimeout(function(){
    			$('#tag-2').on('tap', 'span', function(){
    			var self = this,
    				hid2 = document.getElementById("hid2");
    			if(/unchoose/.test(self.classList)){
    				self.classList.remove('unchoose');
    				hid2.value += self.textContent + ',';
    			}else {
    				self.classList.add('unchoose');
    				hid2.value = hid2.value.replace(self.textContent + ',' , '');
    			}
    		});
    		
    		$('#tag-3').on('tap', 'span', function(){
    			var self = this,
    				hid3 = document.getElementById("hid3");
    			if(/unchoose/.test(self.classList)){
    				self.classList.remove('unchoose');
    				hid3.value += self.textContent + ',';
    			}else {
    				self.classList.add('unchoose');
    				hid3.value = hid3.value.replace(self.textContent + ',' , '');
    			}
    		});
    		
    		$('#tag-1').on('tap', 'span', function(){
    			var self = this,
    				hid1 = document.getElementById("hid1");
    			if(/unchoose/.test(self.classList)){
    				self.classList.remove('unchoose');
    				hid1.value += self.textContent + ',';
    			}else {
    				self.classList.add('unchoose');
    				hid1.value = hid1.value.replace(self.textContent + ',' , '');
    			}
    		});
    		}, 2000)
    		
    		$.plusReady(function(){
    			wv = plus.webview.currentWebview();
    			caseId = wv.caseId;
    			type = wv.type;
				
				getCaseInfoById(caseId, type);
    		});
    		
    		var getCaseInfoById = function(caseId, type){
    			app.net.get('c_old_man_hip_broke_prj_case/show_by_type', {case_id: caseId, case_type: type}, function(data){
    				if(data && data.code === '100') {
    					tmpData = data;
    					html = template('tmp-list-input', tmpData);
    					document.getElementById("list-input").innerHTML = html
    				}
    			});
    		}
    		
    		var CommitDataById = function(commitData){
    			app.net.post('c_old_man_hip_broke_prj_case/update', commitData, function(data){
    				if(data && data.code === '100') {
    					$.toast('保存成功');
    					$.back()
    				} else {
    					$.toast('您尚未进行任何修改哦');
    				}
    			});
    		}
    		
    		var picker1 = new $.PopPicker();
    		picker1.setData([{
                value: '1',
                text: '平稳'
            }, {
                value: '0',
                text: '一般'
            },{
                value: '0',
                text: '不平稳'
            }]);
    	}(mui, app));
    </script>
</body>
</html>